
<template>
  <div class="main">
    <div class="top">生活服务</div>
    <div class="img">
      <img src="../../assets/img/1.png" alt="" />
    </div>
    <div class="title">
      <span>生活缴费</span>
    </div>
    <div class="item">
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <img id="first" src="../../assets/img/icon_shuifei.png" />
          <span>水费</span>
        </van-grid-item>
        <van-grid-item @click="go('dianfei')">
          <img id="first" src="../../assets/img/icon_dainfei.png" />
          <span>电费</span>
        </van-grid-item>
        <van-grid-item @click="go('wangfei')">
          <img src="../../assets/img/icon_kuandai.png" />
          <span>宽带</span>
        </van-grid-item>
        <van-grid-item @click="go('more')">
          <img src="../../assets/img/icon_more.png" />
          <span>更多</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="fuwu" >
      <van-row justify="space-between">
        <van-col @click="go('baojie')"
          ><img src="../../assets/img/baojie.png" alt=""
        /></van-col>
        <van-col @click="go('banjia')"
          ><img src="../../assets/img/banjia.png" alt=""
        /></van-col>
        <van-col @click="go('jiaxiu')"
          ><img src="../../assets/img/jiazhuang.png" alt=""
        /></van-col>
      </van-row>
    </div>
    <div class="title1">
      <span>热门推荐</span>
      <span class="tag">为您提供最优质的服务，享受每一天生活</span>
    </div>
    <div class="tuijian">
     <van-grid :border="false" :column-num="2">
  <van-grid-item style="background-color: #ebebeb;">
   <img src="../../assets/img/richang.png" alt="" @click="go('ordinaryclean')">
  </van-grid-item>
  <van-grid-item>
   <img src="../../assets/img/chuman.png" alt="" @click="go('chuman')">
  </van-grid-item>
  <van-grid-item>
    <img src="../../assets/img/yijubanjia.png" alt="" @click="go('banjia')">
  </van-grid-item>
  <van-grid-item>
    <img src="../../assets/img/youhui.png" alt="" @click="go('chargecard')" >
  </van-grid-item>
</van-grid>
<div class="zhanwei"></div>
    </div>
    <shouye-under></shouye-under>
  </div>
</template>

<script>

import ShouyeUnder from '../../components/shouyeUnder.vue';
export default {
  
  name: "",
  data() {
    return {};
  },
  watch: {},
  props: {},
  components: {
    ShouyeUnder
  },
  computed: {},
  mounted() {},
  methods: {
    go(page){
      this.$router.replace({name:page})
    }
  },
  filters: {},
};
</script>

<style scoped lang='less'>
.main {
  height: 100%;
  width: 100%;
 
  .top {
    height: 140px;
    background-color: rgb(255, 86, 84);
    text-align: center;
    line-height: 140px;
    color: #fff;
  }
  .img {
    height: 364px;
    img {
      width: 100%;
      height: 364px;
    }
  }
  .title {
    font-size: 37px;
    color: rgba(0, 0, 0, 0.8);
    margin: 20px 20px 20px;
    span {
      font-weight: bolder;
    }
  }
  .item {
    box-shadow: 5px 5px 5px 1px #eee,-5px -5px 5px 1px #eee;
    font-size: 30px;
    margin: 0 20px 24px;
    #first {
      width: 50px;
    }
    img {
      height: 70px;
      width: 70px;
    }
    span {
      margin-top: 10px;
      font-weight: bold;
    }
  }
  .fuwu {
    margin: 0 20px;
    .van-row {
      display: flex;
      justify-content: space-between;
      &::after{
        content: none;
      }
      .van-col {
        text-align: center;
        img {
         width: 226px;
         height: 100%;
         float: left;
        // display: block;
        }
      }
    }
  }
  .title1 {
    font-size: 37px;
    color: rgba(0, 0, 0, 0.8);
    margin: 8px 20px 10px;
    font-weight: bold;
    .tag{
      font-size: 22px;
      margin-left: 20px;
    }
  }
  .tuijian{
    .van-grid-item{
      /deep/ .van-grid-item__content{
        padding: 17px 0;
      }
      
 img{
      width: 342px;
      height: 130px;
    }
    }
   
  }
  .zhanwei{
    width: 100%;
    height: 150px;

  }
}
</style>